<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>登记表单</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">
        body {
            background-color: rgb(104, 145, 224);
        }

        .wallpaper {
            background-size: auto;
            background-position: 0px 0px;
            background-repeat: repeat;
            background-color: rgb(104, 145, 224);
            background-attachment: fixed;
        }

        /*container*/
        .container {
            background-color: rgb(255, 255, 255);
            border-style: none;
            border-width: 0px;
            border-color: rgb(84, 84, 84);
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
        }

        .container {
            margin: 17px auto 15px auto;
            width: 640px;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
            position: relative;
            opacity: 1;
            filter: Alpha(Opacity=100);
            border-radius: 3px;
        }

        * {
            padding: 0;
            margin: 0;
        }

        /*logo*/
        .logo {
            background-color: rgb(104, 145, 224);
        }

        .logo {
            font-size: 100%;
            text-decoration: none;
            text-indent: -9000px;
        }

        * {
            padding: 0;
            margin: 0;
        }

        h1 {
            display: block;
            font-size: 2em;
            margin-block-start: 0.67em;
            margin-block-end: 0.67em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            font-weight: bold;
        }

        /*form*/
        form {
            margin: 20px 15px 0;
            padding: 0 0 20px;
            font-size: 14px;
        }

        .info div {
            font-family: 微软雅黑;
            font-style: normal;
            font-weight: 400;
            font-size: 90%;
            text-align: inherit;
            color: rgb(118, 118, 118);
        }

        hr {
            border: 0;
            border-top: 1px dotted #ececec
        }

        .req {
            color: #ff7172 !important;
            font-weight: bold;
        }

        .input {
            font-family: 微软雅黑;
            font-style: normal;
            font-weight: 400;
            font-size: 100%;
            text-align: left;
            color: rgb(84, 84, 84);
            background-color: rgb(255, 255, 255);
            border-style: solid;
            border-width: 1px;
            border-color: rgb(221, 221, 221);
            height: 37px;
            padding: auto;
        }
        input{
            padding-left: 10px;
        }


        .three div span {
            display: block;
            float: left;
            padding: 3px 0;
            width: 33%;
        }

        .content span {
            font-family: 微软雅黑;
            font-style: normal;
            font-weight: 400;
            font-size: 100%;
            color: rgb(84, 84, 84);
        }
        .fields {
            padding: 0 0 10px 0;
            position: relative;
            zoom: 1;
        }

        ul {
            list-style: none;
        }
        .fields>li {
            padding: 6px;
            position: relative;
            zoom: 1;
            clear: both;
            width: 98%;
            vertical-align: middle;
            margin-bottom: 2px;
        }
    </style>
</head>
<body class="wallpaper">
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h1 id="logo" class="logo" style="position:relative;">
                <a></a>
            </h1>
        </div>
    </div>
    <div class="row">
        <form>
            <div class="form-group">
                <div class="info" id="form-header">
                    <h3>学校学生体温每日上报登记</h3>
                    <div><p>为了做好新型冠状病毒感染肺炎的防控，请每日如实填写身体健康情况，谢谢配合!</p></div>
                </div>
                <hr/>
            </div>
            <div class="form-group" id="app">
                <!--隐藏表单域-->
                <input type="hidden" name="stuId" v-model="stu.stuId"/>
                <ul id="fields" class="fields">
                    <li class="field_li_for_logic" ><label class="desc">学生姓名 <span
                            class="req">*</span></label>
                        <div class="content"><input type="text" maxlength="8" class="s input fld" v-model="stu.name" name="name"></div>
                    </li>
                    <li  class="field_li_for_logic" >
                        <label class="desc">所属部门&amp;所在班级 <span class="req">*</span></label>
                        <div class="content"><select class="dd1 input fld m" style="margin-right: 1%; width: 49.0%; "
                                                      name="F3_dropdown2" v-model="selectedDept">
                            <option disabled v-for="(dept, index) in department" :value="index" v-text="dept.deptName"></option>

                        </select><select class="dd2 input fld m" style="margin-right: 1%; width: 49.0%; " level="2"
                                          v-model="selectedGrade" >
                            <h1>{{selectedGrade}}</h1>
                            <option v-for="grade in grades" :value="grade.gradeId" v-text="grade.gradeName" ></option>
                        </select></div>
                    </li>
                    <li  class="field_li_for_logic" ><label
                            class="desc">现住址 <span class="req">*</span></label>
                        <div class="content"><input type="text" style="width: 285px" class="s input fld" v-model="currentDistrict"></div>
                    </li>
                    <li class="three field_li_for_logic" >
                        <label class="desc">健康状况 <span class="req">*</span></label>
                        <div class="content pretty-box">
                            <span style="margin-right: 5px"><label for="i1">正常</label><input id="i1" type="radio" value="正常" v-model="currentHealth"/></span>
                            <span><label for="i2">感染</label><input id="i2" type="radio" value="感染" v-model="currentHealth"/></span>
                            <span><label for="i3">疑似</label><input id="i3" type="radio" value="疑似" v-model="currentHealth"/></span>
                        </div>
                    </li>
                    <li class="field_li_for_logic">
                        <label class="desc">体温（℃） <span class="req">*</span></label>
                        <div class="content"><input type="text" maxlength="4"  min="36" max="45" class="input fld m"
                        placeholder="比如37.5" v-model="currentTemperature">
                        </div>
                    </li>
                    <li class="field_li_for_logic"><label
                            class="desc">手机 <span class="req">*</span></label>
                        <div class="content"><input type="text" maxlength="11" class="s phone input fld"
                                                 v-model="stu.phone"   name="phone"></div>
                    </li>
                    <li class="field_li_for_logic" typ="textarea"><label
                            class="desc">其他</label>
                        <div class="content">
                            <textarea name="F1" cols="70" rows="50"
                                      class="input fld s" style="margin: 0px;height: 74px;width: 612px; resize:none"
                            ></textarea></div>
                    </li>
                </ul>
                <div class="row">
                    <div class="col-md-12">
                        <button type="button" class="btn btn-success btn-lg btn-block" @click.prevent="submitForm()">提交</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<!--vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
<script src="resources/js/jquery-1.11.0.min.js"></script>
<script src="resources/js/front-student.js"></script>

</body>
</html>